<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Skulpt Mini IDE</title>
    <script src="/ide/static/closure-library/closure/goog/base.js" type="text/javascript"></script>
    <script src="/static/skulpt.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/builtins.js" type="text/javascript" charset="utf-8"></script>
    <script src="/ide/static/codemirror/js/codemirror.js" type="text/javascript" ></script>
    <script>
        goog.require('goog.ui.ComboBox');
        goog.require('goog.ui.CustomButton');
        goog.require('goog.ui.MenuButton');
        goog.require('goog.style');
        goog.require('goog.net.XhrIo');
    </script>
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/demos/css/demo.css">
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/css/custombutton.css">
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/css/menu.css">
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/css/menuitem.css">
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/css/menuseparator.css">
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/css/menubutton.css">
    <link rel="stylesheet" href="/ide/static/closure-library/closure/goog/css/combobox.css">
    <style type="text/css" media="screen">
        body {
            margin: 0;
            padding: 0;
            background-color: #ddd;
            color: #333;
            font-family: Arial, sans-serif;
            font-size: 10pt;
        }

        #footer {
            clear: both;
            text-align: center;
            font-size: 8pt;
        }

        #canvas {
            width: 800px;
            height: 450px;
            margin: 0 auto;
            text-align: left;
            background-color: #000;
        }

        pre {
            text-align: left;
            width: 800px;
            height: 400px;
            font-family: Consolas, Monaco, "Lucida Console", monospace;
            margin: 0 auto;
            padding: 0;
        }

        #code {
            font-family: Consolas, Monaco, "Lucida Console", monospace;
            margin: 10px;
            padding: 0;
        }
        .editbox {
            font-family: Consolas, Monaco, "Lucida Console", monospace;
        }

        #output_container {
            text-align: left;
            width: 800px;
            height: 400px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
        }

        #runoutput {
            overflow: auto;
        }

        #code_container {
            width: 800px;
            height: 400px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            background-color: #fff;
            font-family: Consolas, Monaco, "Lucida Console", monospace;
            border: 3px rounded black;
        }

        .CodeMirror-line-numbers {
            width: 2.2em;
            color: #aaa;
            background-color: #eee;
            text-align: right;
            padding-right: .3em;
            font-size: 10pt;
            font-family: Consolas, Monaco, "Lucida Console", monospace;
            padding-top: .4em;
        }

        #codeui {
            margin: 0 auto;
            margin-top: 15px;
            width: 800px;
        }

        #header {
            text-align: center;
            margin: 10px;
        }

        #editbutton {
            text-align: right;
        }

        #main {
            width: 800px;
            margin: auto;
        }

    </style>
</head>

<body onload="startup()">

<div id='main'>
    <div id="header">
        <a href="/"><img src="/ide/static/logo.png"/></a>
    </div>

    <div>
        <canvas id="canvas" width="800" height="450" style="display:block;"></canvas>
        <pre id="error" style="display:none;">
Error:
        <pre>
    </div>

    <div id="editbutton">
    </div>
    <div style="display:none;" id="codeoroutput">
        <div style="display:none;" id="output_container">
            <div id="run_output_container">
                <pre id="runoutput">
                </pre>
            </div>
        </div>

        <div id="codeui">
            <div>
                <table style="float:left;"><tr>
                        <td style="text-align:left;"><div id="menuButtons"></div></td>
                        <td style="text-align:left;"><div id="filelist" class="use-arrow"></div></td>
                </tr></table>
                <div id="hidecode"
                        style="float:right;"></div>
            </div>

            <div style="clear:both;"></div>

            <div id="code_container">
                <textarea spellcheck="false" id="code"></textarea>

            </div>
        </div>

    </div>
</div>


<div id="footer">
</div>

<script src="/ide/static/ide.js" type="text/javascript" ></script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10993568-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
